<template>
  <div class="styled-input captcha" :class="{ filled: modelValue }">
    <input type="text" class="styled-input__input" :placeholder="''" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
    <div class="styled-input__placeholder">
      <span class="styled-input__placeholder-text" ref="placeholderText">{{ label }}</span>
    </div>
    <div class="styled-input__circle"></div>
    <div class="captcha-img" @click="refresh">
      <img :src="src" alt="captcha" />
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';

  const props = defineProps({
    modelValue: String,
    label: String,
    src: String,
  });

  const placeholderText = ref(null);
  function animatePlaceholder() {
    const text = placeholderText.value;
    const chars = text.innerText.split('');
    text.innerHTML = chars.map((c) => `<span class='letter'>${c}</span>`).join('');
  }

  function refresh() {
    // 可根据业务需求添加验证码刷新逻辑，例如：
    // emit('refresh') 或者通过 props 回调
  }
  onMounted(() => {
    animatePlaceholder();
  });
</script>

<style scoped>
  @import '../css/EchoInputStyle.css';

  .captcha {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .captcha-img {
    flex-shrink: 0;
    width: 100px;
    height: 38px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .captcha-img img {
    height: 100%;
    object-fit: contain;
  }
</style>
